<template>
	<view class="page">
		<!-- topbar start -->
		<view class="cu-custom bg-white" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
			<view class="cu-bar bg-white fixed" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
				<view class="action" @click="back"><text class="cuIcon-back fu-fs36"></text></view>
				<view class="fu-fs32">{{i18n['选择位置']}}</view>
				<!-- #ifdef APP-PLUS || H5 -->
				<view class="margin-right bg-theme text-white radius-100 padding-lr-24 padding-tb-6 " @click="back">
					{{i18n['确定']}}
				</view>
				<!-- #endif -->
			</view>
		</view>
		<!-- #ifdef MP -->
		<view class="flex justify-end  padding-sm" :style="{ top: CustomBar + 'px' }">
			<view class="margin-right bg-theme text-white radius-100 padding-lr-24 padding-tb-6 " @tap="back">
				{{i18n['确定']}}
			</view>
		</view>
		<!-- #endif -->

		<!-- topbar end -->
		<view class="select_location w100  padding-lr bg-white">
			<view class=" flex height-100 text-lg flex align-center w100 solid-top solid-bottom ">
				<text class="text-df text-theme"> {{i18n['当前选择']}}</text>
				<view class="flex flex-sub width-180 justify-between padding-left-40 text-df  text-999">
					<input class="flex-sub text-333 flex1" type="text" disabled v-model="address"
						:placeholder="i18n['请选择自取点']" />
						<image :src="imgBaseUrl+'address/posit.png'" mode="aspectFill" class="fu-block-40  flex-shrink"></image>
				</view>
			</view>
		</view>
		<!--    标题栏 end -->
		<!--    左侧分类 start -->
		<!-- #ifdef MP-->
		<view :style="{height: 'calc(100vh - '+(CustomBar+ CustomBar )+'px)'}" class="content padding-top-120  flex">
			<!-- #endif -->
			<!-- #ifdef APP-PLUS || H5 -->
			<view :style="{height: 'calc(100vh - '+(CustomBar)+'px)'}" class="content padding-top-120 flex">
				<!-- #endif -->
				<scroll-view class="left width-168 bg-white" scroll-y>
					<block v-for="(item,index) in lists" :key="index">
						<view class="bg-f8"
							:class="{'prev-wrap':index == currentIndex-1,'next-wrap':index == currentIndex+1}">
							<view class="item w100 height-100 line-height-100 text-sm text-center text-cut"
								:class="{'active ': index == currentIndex,'prev':index == currentIndex-1,'next':index == currentIndex+1}"
								@click="handleSelect(item,index)">
								{{ item.name }}
							</view>
						</view>
					</block>
				</scroll-view>
				<!-- 左侧分类 end -->
				<!-- 右侧分类 start-->
				<view class=" h100 flex flex-direction flex1  ">
					<scroll-view class="  bg-white radius-16" scroll-y v-if="lists.length>0">
						<block v-for="(item,index) in inviteSome" :key="index">
							<view class="flex align-center padding-lr-24 padding-tb-20">
								<view class="fu-block-140 radius-16 flex-shrink margin-right-20">
									<image :src="item.thumb || 'https://shengyuanadmin.hnshpjs.com/h5img/images/tab/logo.png'" mode="" class="fu-block-140"></image>
								</view>
								<view class="flex flex-direction justify-between height-140 w80 padding-tb-10">
									<view class="text-cut-2">
										{{item.full_address}} 
									</view>
									<view class="flex justify-between justify-between align-center">
										<text class="text-999 text-sm">{{item.deliver_name}}</text>
										<!-- <view class="flex align-center text-theme text-sm">
											<image :src="imgBaseUrl+'address/posit.png'" mode="" class="fu-block-28 margin-right-4 flex-shrink"></image>
											<text>0.3km</text>
										</view> -->
									</view>
								</view>
							</view>
						</block>
					</scroll-view>
					<!-- 	<picker-view v-if="inviteSome.length > 0" @change="bindChange" class="picker-view">
						<picker-view-column>
							<view class=" height-68 line-height-68 flex align-center justify-center"
								v-for="(item,index) in inviteSome" :key="index">{{item.deliver_name}}</view>
						</picker-view-column>
					</picker-view> -->
					<view v-else class="page-kong padding-tb">
						<view class="block-262 width-326 height-333">
							<image :src="imgBaseUrl + 'empty/order.png'" mode="aspectFill" class=""></image>
						</view>
						<view class="margin-top-sm  text-999 margin-top-50 text-center w100">{{i18n['该地区还没有自取点']}}
						</view>
					</view>

				</view>
				<!-- 右侧分类 end -->
			</view>
			<!-- 断网监测 start-->
			<fu-notwork></fu-notwork>
			<!-- 断网监测 end-->
		</view>
</template>

<script>
	// 高德地图sdk
	import amapFile from '@/libs/amap-wx.js';
	export default {
		data() {
			return {
				CustomBar: this.CustomBar, //标题栏高度
				StatusBar: this.StatusBar, //状态栏高度
				currentIndex: 0, //左侧分类选中项下标
				rember_right_index: 0,
				type: null, // 1 从自取点过来的，2从首页过来的
				selectDistrictItem: {}, //选择的区
				lists: [], //左侧分类数据
				currentList: [], //右侧分类数据
				inviteSome: [],
				ziquName: '',
				ad: [], //广告数据
				myAmapFun: null, // 高德地图实例
				province: global.i18n['河南省'], // 省
				city: global.i18n['郑州市'], //市
				district: '', //区
				provinceCode: '', // 省 code码
				cityCode: '', //市 code码
				districtCode: '', //区 code码
				addressDesc: '', // 详细地址
			}
		},
    computed: {
      location() {
        return this.$store.getters.location;
      },
      // 合并省市区信息字段
      address() {
      
      	if (this.location && this.location.city && !this.ziquName) {
      		return this.location.city + this.location.district;
      	} else if (this.location && this.location.city && this.ziquName) {
      		return this.location.city + this.location.district + '-' + this.ziquName;
      	} else {
      		return global.i18n['请授权获取当前位置']
      	}
      
      },
    },
		onLoad(options) {
			this.type = options.type
      if(!this.location || !this.location.latitude){
        this.loadDataOptions();
        this.autoGetLocation((res) => {
          this.$store.commit('updataLocation', res);
          this.loadDataOptions();
        });
      } else {
        this.loadDataOptions();
      }
		},
		methods: {
			/**
			 * @func 定位地址
			 */
			getLocation() {
				let _this = this;
				//#ifdef MP-WEIXIN
				uni.getSetting({
					success(res) {
						// 获取设置成功
						console.log(res.authSetting);
						if (!res.authSetting.userLocation) {
							// 如果没开启权限提示打开
							uni.openSetting({
								success(res) {
									// 打开成功，提示获取权限
									console.log(res.authSetting);
									uni.authorize({
										scope: 'scope.userLocation',
										success(res) {
											_this.chooseLocation();
										},
										fail(res) {
											console.log(res);
											this.$message.info(this.i18n['打开权限失败']);
										}
									});
								}
							});
						} else {
							_this.chooseLocation();
						}
					}
				});
				//#endif
				this.chooseLocation();
			},
			/**
			 * @func 地图选点
			 */
			chooseLocation() {
				let _this = this
				uni.chooseLocation({
					success: (res) => {
            this.getRegeo(res.latitude, res.longitude, (data) => {
              this.$store.commit('updataLocation', data);
              this.loadDataOptions()
            })
					}
				})
			},
			bindChange(e) {
				const val = e.detail.value
				this.rember_right_index = val
				if (this.inviteSome[val] && this.inviteSome[val].deliver_name) {
					this.ziquName = this.inviteSome[val].deliver_name
				}
			},
			/**
			 * @description 返回上一页
			 */
			back() {
				// if (this.type == 1) {
				// 	this.$urouter.redirectTo({
				// 		url: '/pages/address/get-location/index',
				// 		params: {
				// 			type: 1,
				// 			id: this.selectDistrictItem.id,
				// 			name: this.selectDistrictItem.name
				// 		}
				// 	});

				// } else {
					uni.navigateBack();
				// }
			},
			/**
			 * 获取左侧分类数
			 * @param item 选中分类内容
			 * @param index 选中分类下标
			 */
			handleSelect(item, index) {
				this.selectDistrictItem = item
				this.currentIndex = index;
				this.ziquName = ''
				this.district = item.name
				// this.location.district = item.name
				// this.location.districtCode = item.region_code
				// let updataLocation = {
				// 	province: this.location.province,
				// 	city: this.location.city,
				// 	district: this.location.district,
				// 	addressDesc: this.location.addressDesc,
				// 	provinceCode: this.location.provinceCode,
				// 	cityCode: this.location.cityCode,
				// 	districtCode: this.location.districtCode,
				// }
				// // console.log(updataLocation)
				// this.$store.commit('updataLocation', updataLocation);
				const that = this

				this.$api.post(global.apiUrls.getInviteAddress, {
						district_id: item.id
					})
					.then(res => {
						if (res.data.code == 1) {
							this.inviteSome = res.data.data.data || []
							if (that.inviteSome.length == 0) {
								return
							}
							if (that.inviteSome.length >= that.rember_right_index) {
								that.ziquName = that.inviteSome[that.rember_right_index].deliver_name
							} else {
								that.rember_right_index = 0
								that.ziquName = that.inviteSome[0].deliver_name
							}
						} else {
							this.$message.error(res.data.msg);
						}
					})

			},
			/**
			 * @description 获取分类数据
			 */
			loadDataOptions() {
				const that = this
				this.$api.post(global.apiUrls.getInviteCitys, {
						code: this.location && this.location.cityCode || ''
					})
					.then(res => {
						if (res.data.code == 1) {
							let list = res.data.data;
							this.lists = list;
							if (that.lists.length > 0 && that.location && that.location.districtCode) {
								that.lists.forEach(function(item, index) {
									if (item.region_code == that.location.districtCode) {
										that.handleSelect(item, index)
										return
									}
								})
							}
							if (this.lists.length > 0 && !that.location) {
								this.handleSelect(that.lists[0], 0);
							}

							//	默认显示推荐数据
						} else {
							this.$message.error(res.data.msg);
						}
					})
			},

			/**
			 * @description 去分类列表页
			 * @param cid 商品cid
			 */
			navToList(item) {
				this.ziquName = item.deliver_name
				// uni.navigateBack();
				// this.$urouter.navigateTo({
				//   url: '/pages/goods/goodslist/goods-search/index',
				//   params: {
				//     cid: cid
				//   }
				// });
			},

		}
	}
</script>

<style lang='scss' scoped>
	page{
		height: 100vh;
	}
	.picker-view {
		width: 100%;
		height: 600rpx;

	}

	.block-262 {
		margin: 0 auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.select_location {
		position: fixed;
		z-index: 10;

	}

	.page {
		height: 100vh;

		.content {
			height: 80vh;
			.left {
				min-width: 168rpx;
				height: 100%;

				.prev-wrap {
					border-radius: 0 0 24rpx 0;
				}

				.next-wrap {
					border-radius: 0 24rpx 0 0;
				}

				.item {
					transition: all 0.2s;
				}

				.item.active {
					color: #333;
					position: relative;
					font-weight: bold;
				}

				.item.active::after {
					content: '';
					position: absolute;
					left: 0;
					width: 8rpx;
					height: 34rpx;
					background-color: $theme;
					border-radius: 4rpxs;
					top: 0;
					bottom: 0;
					margin: auto;
				}

				.item.prev {
					border-radius: 0 0 24rpx 0;
				}

				.item.next {
					border-radius: 0 24rpx 0 0;
				}
			}
		}
	}
</style>
